<template>
    <ui-main :title="$route.name">
        <ui-split-screen left="800">
            <!--左布局-->
            <div slot="left">
                <div class="ui flex h-100p column">
                    <div class="p-20 ui flex">
                        <div class="item one">
                            <ui-table-filter ref="filter"
                                v-model="tableData1"
                                :sel-options="[{ value: 'name', label: '名称' },{ value: 'id', label: '艾迪' }]"></ui-table-filter>
                        </div>
                        <div class="item one">
                            <el-button @click="converter" type="primary" size="small" class="fl-r">切换数据源</el-button>
                        </div>
                    </div>
                    <div class="item one">
                        <div class="p-l-20 p-r-20 h-100p">
                            <el-table border :data="tableData1" :height="h" v-adaptive-table>
                                <el-table-column fixed prop="id" label="序号" width="150" align="center" header-align="center">
                                    <template slot-scope="scope">{{ scope.row.id }}</template>
                                </el-table-column>
                                <el-table-column prop="date" label="日期" width="150"></el-table-column>
                                <el-table-column prop="name" label="姓名" width="120"></el-table-column>
                                <el-table-column prop="progress" label="完成度" width="120">
                                    <template slot-scope="scope">
                                        <el-progress :percentage="scope.row.progress"></el-progress>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="province" label="省份" width="120"></el-table-column>
                                <el-table-column prop="city" label="市区" width="120"></el-table-column>
                                <el-table-column prop="address" label="地址" width="300"></el-table-column>
                                <el-table-column fixed="right" prop="zip" label="邮编" width="120"></el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
            <!--右布局-->
            <div slot="right">
                <ui-load-md class="p-l-20 p-r-20" file="./ui-table-filter.md"></ui-load-md>
            </div>
        </ui-split-screen>
    </ui-main>
</template>
<script>
    export default {
        data() {
            return {
                tableData1: [],
                tableData2: [],
                tableData3: [],
                num: 0,
                h: 100,
                flag: false,
            };
        },
        mounted() {
            setTimeout(() => {
                for (let i = 0, len = 10; i < len; i++) {
                    this.tableData1.push({
                        id: i.toString(),
                        date: '2016-05-03',
                        name: '王小虎' + i,
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333,
                        editable: true,
                        progress: Math.round(Math.random() * 10) * 10,
                        visible: false
                    })
                    this.tableData3 = this.tableData1
                }
                // this.$refs.filter.search('name', '1')
            }, 100)

            for (let i = 0, len = 20; i < len; i++) {
                this.tableData2.push({
                    id: i.toString(),
                    date: '2016-05-03',
                    name: '李大妈' + i,
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333,
                    editable: true,
                    progress: Math.round(Math.random() * 10) * 10,
                    visible: false
                })
            }

        },
        methods: {
            converter() {
                this.flag = !this.flag
                if (this.flag) {
                    this.tableData1 = this.tableData2
                    this.$refs.filter.search('name', '1'+ this.num)
                    this.num ++
                }else{
                    this.tableData1 = this.tableData3
                }
            }
        }
    }
</script>
